<template>
  <div class="userList">
    <h3>用户列表</h3>
    <div class="search">
      <div class="cond1 cond">
        <el-input placeholder="请输入用户名" v-model="search1">
          <template slot="prepend">用户名</template>
        </el-input>
      </div>
      <div class="cond1 cond">
        <el-input placeholder="请输入手机号" v-model="search2">
          <template slot="prepend">手机号</template>
        </el-input>
      </div>
      <div class="cond1 cond">
        <el-input placeholder="请输入邀请码" v-model="search3">
          <template slot="prepend">邀请码</template>
        </el-input>
      </div>
      <div class="cond2 cond">
        <label>用户类型</label>
        <el-select v-model="search4" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="cond2 cond">
        <label>vip卡类型</label>
        <el-select v-model="search5" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="cond2 cond">
        <label>注册时间</label>
        <el-date-picker
          v-model="search6"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        ></el-date-picker>
      </div>
      <div>
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
      </div>
    </div>
    <!-- <div class="opration">
      <el-button type="success" icon="el-icon-plus" @click="addData">添加</el-button>
      <el-button type="danger" icon="el-icon-delete" @click="batchDelete">删除</el-button>
    </div>-->
    <div class="list">
      <el-table
        border
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column header-align="center" align="center" type="selection" width="55"></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="用户ID"
          sortable
          width="90"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="userName"
          label="用户名"
          width="100"
        ></el-table-column>
        <el-table-column header-align="center" align="center" prop="type" label="类型" width="100"></el-table-column>
        <el-table-column header-align="center" align="center" prop="group" label="分享类型" width="100"></el-table-column>
        <el-table-column header-align="center" align="center" prop="group" label="手机号" width="100"></el-table-column>
        <el-table-column header-align="center" align="center" prop="group" label="邀请码" width="100"></el-table-column>
        <el-table-column header-align="center" align="center" prop="group" label="vip卡" width="100"></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="group"
          label="vip到期时间"
          width="200"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="group"
          label="vip等级"
          width="100"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="group"
          label="每日观影总数"
          width="120"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="group"
          label="每日观影已使用次数"
          sortable
          width="180"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="group"
          label="邀请人数"
          sortable
          width="110"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="date"
          label="注册时间"
          sortable
          width="200"
        ></el-table-column>
        <el-table-column header-align="center" align="center" label="操作" width="500" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="warning" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
            <el-button size="mini" type="success" @click="handleEdit(scope.$index, scope.row)">加入黑名单</el-button>
            <el-button size="mini" type="danger" @click="handleVip(scope.$index, scope.row)">发放会员卡</el-button>
            <el-button
              size="mini"
              type="primary"
              @click="handleOldUser(scope.$index, scope.row)"
            >绑定老用户</el-button>
            <el-button
              size="mini"
              type="warning"
              @click="handleSendGold(scope.$index, scope.row)"
            >发放金币</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage1"
        :page-size="100"
        layout="total, prev, pager, next, jumper"
        :total="1000"
      ></el-pagination>
    </div>
    <!-- 用户详情弹窗 -->
    <el-dialog title="用户详情" :visible.sync="centerDialogVisible" width="40%" center>
      <div class="detail">
        <div class="title">基本信息</div>
        <div class="detailBox">
          <div class="detailItem">
            <font>用户id：</font>
            <span>59874</span>
          </div>
          <div class="detailItem">
            <font>vip卡：</font>
            <span>月度卡</span>
          </div>
          <div class="detailItem">
            <font>用户编号：</font>
            <span>User_Fq2y8C</span>
          </div>
          <div class="detailItem">
            <font>vip等级：</font>
            <span>User_Fq2y8C</span>
          </div>
          <div class="detailItem">
            <font>用户马甲名：</font>
            <span>User_Fq2y8C</span>
          </div>
          <div class="detailItem">
            <font>vip到期时间：</font>
            <span>User_Fq2y8C</span>
          </div>
          <div class="detailItem">
            <font>手机号：</font>
            <span>User_Fq2y8C</span>
          </div>
          <div class="detailItem">
            <font>每日观影次数总数：</font>
            <span>User_Fq2y8C</span>
          </div>
          <div class="detailItem">
            <font>类型：</font>
            <span>User_Fq2y8C</span>
          </div>
          <div class="detailItem">
            <font>每日观影次数已使用次数：</font>
            <span>User_Fq2y8C</span>
          </div>
          <div class="detailItem">
            <font>创建时间：</font>
            <span>User_Fq2y8C</span>
          </div>
          <div class="detailItem">
            <font>邀请人数：</font>
            <span>User_Fq2y8C</span>
          </div>
          <div class="detailItem">
            <font>邀请人id：</font>
            <span>User_Fq2y8C</span>
          </div>
          <div class="detailItem">
            <font>邀请人：</font>
            <span>User_Fq2y8C</span>
          </div>
        </div>
      </div>
      <div class="history">
        <div class="title">用户邀请历史</div>
        <el-table :data="historyData" style="width: 100%" border size="mini">
          <el-table-column prop="date" label="邀请码" header-align="center" align="center"></el-table-column>
          <el-table-column prop="name" label="被邀请人" header-align="center" align="center"></el-table-column>
          <el-table-column prop="address" label="邀请时间" header-align="center" align="center"></el-table-column>
        </el-table>
      </div>
      <div class="user_device">
        <div class="title">用户设备号</div>
        <el-table :data="deviceData" style="width: 100%" border size="mini">
          <el-table-column prop="date" label="id" width="100" header-align="center" align="center"></el-table-column>
          <el-table-column prop="name" label="设备号" header-align="center" align="center"></el-table-column>
          <el-table-column prop="address" label="创建时间" header-align="center" align="center"></el-table-column>
        </el-table>
      </div>
    </el-dialog>
    <!-- //发放会员卡弹窗 -->
    <el-dialog title="发放会员卡" :visible.sync="vipDialogVisible" width="40%" center>
      <div>
        <span>会员卡：</span>
        <el-select v-model="sendVipSelect" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="dialogBtn">
        <el-button type="primary" size="small" @click="submitSendVip">提交</el-button>
        <el-button type="info" size="small" @click="cancelSendVip">取消</el-button>
      </div>
    </el-dialog>
    <!-- //绑定老用户弹窗 -->
    <el-dialog title="绑定老用户" :visible.sync="oldUserDialogVisible" width="40%" center>
      <div>
        <span>老用户手机号：</span>
        <el-input placeholder="请输入手机号" v-model="inputOldUser" clearable></el-input>
      </div>
      <div class="dialogBtn">
        <el-button type="primary" size="small" @click="submitOldUser">提交</el-button>
        <el-button type="info" size="small" @click="cancelOldUser">取消</el-button>
      </div>
    </el-dialog>
    <!-- //发放金币弹窗 -->
    <el-dialog title="发放金币" :visible.sync="goldDialogVisible" width="40%" center>
      <div class='goldRow'>
        <span>发放金币数：</span>
        <el-input placeholder="请输入金币数" v-model="inputgoldNum" clearable type="number"></el-input>
      </div>
      <div class='goldRow'>
        <span>发放密码：</span>
        <el-input placeholder="请输入发放密码" v-model="inputSendPassword" clearable show-password></el-input>
      </div>
      <div class="dialogBtn">
        <el-button type="primary" size="small" @click="submitSendGold">提交</el-button>
        <el-button type="info" size="small" @click="cancelSendGold">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "userList",
  components: {},
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      search1: "",
      search2: "",
      search3: "",
      search4: "",
      search5: "",
      search6: "",
      //用户详情弹窗
      centerDialogVisible: false,
      //发放会员卡弹窗
      vipDialogVisible: false,
      //绑定老客户弹窗
      oldUserDialogVisible: false,
      //发放金币弹窗
      goldDialogVisible:false,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          num: 1,
          userName: "aaa",
          group: "客服人员",
          type: "普通管理员",
          note: "大师傅艰苦是否就是",
          state: "正常"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          num: 2,
          userName: "aaa",
          group: "客服人员",
          type: "普通管理员",
          note: "大师傅艰苦是否就是",
          state: "正常"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          num: 3,
          userName: "aaa",
          group: "客服人员",
          type: "普通管理员",
          note: "大师傅艰苦是否就是",
          state: "正常"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          num: 4,
          userName: "aaa",
          group: "客服人员",
          type: "普通管理员",
          note: "大师傅艰苦是否就是",
          state: "正常"
        }
      ],
      //多选框选中的值
      multipleSelection: [],
      form: {
        name: "",
        num: "",
        userName: "",
        group: "",
        type: "",
        note: "",
        state: ""
      },
      currentPage1: 1,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      //用户邀请历史
      historyData: [],
      //用户设备号
      deviceData: [],
      // 发放会员卡选中
      sendVipSelect: "",
      //老用户手机号
      inputOldUser:"",
      //发放金币数
      inputgoldNum:"",
      //发放密码
      inputSendPassword:"",
    };
  },
  created() {},
  mounted() {},
  methods: {
    //显示用户详情
    handleEdit(index, row) {
      this.centerDialogVisible = true;
      // this.form = row;
    },
    //显示发送会员卡弹窗
    handleVip(index, row) {
      this.vipDialogVisible = true;
    },
    //显示绑定老客户弹窗
    handleOldUser(index, row) {
      this.oldUserDialogVisible = true;
    },
    //发放金币弹窗
    handleSendGold(index, row){
      this.goldDialogVisible = true;
    },
    //删除单行数据
    handleDelete(index, row) {
      this.tableData.splice(index, 1);
    },
    //多选框选中
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
    //添加数据
    addData() {
      // alert(123);
      this.dialogTitle = "添加";
      this.form = {};
      this.centerDialogVisible = true;
      // console.log(this.form);/
    },
    //批量删除
    batchDelete() {
      for (let i = 0; i < this.multipleSelection.length; i++) {
        for (let j = 0; j < this.tableData.length; j++) {
          if (this.multipleSelection[i].num == this.tableData[j].num) {
            this.tableData.splice(j, 1);
            j--;
          }
        }
      }
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage1 = val;
    },
    //提交发送会员卡
    submitSendVip() {},
    //取消发送会员卡
    cancelSendVip() {
      this.vipDialogVisible = false;
    },
    //提交绑定老用户
    submitOldUser(){

    },
    //取消绑定老用户
    cancelOldUser(){
       this.oldUserDialogVisible = false;
    },
    //提交发放金币
    submitSendGold(){},
    //取消发放金币
    cancelSendGold(){
      this.goldDialogVisible = false;
    },
  }
};
</script>
<style scoped>
h3{
    padding:.2rem;
    color:#3c763d;
}
.search {
  display: flex;
  margin-top: 0.2rem;
  padding-left: 0.2rem;
  width: 100%;
  flex-wrap: wrap;
}
.el-input {
  width: 2.5rem;
}
label {
  width: 0.83rem;
  height: 0.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f7fa;
  color: #909399;
  border: 1px solid #dcdfe6;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  font-size: 14px;
}
.cond {
  display: flex;
  margin-right: 0.4rem;
  margin-bottom: 0.1rem;
}
.search .el-select >>> .el-input__inner {
  border-left: none;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
.search .el-select {
  width: 1.67rem;
}
.opration {
  margin-top: 0.2rem;
  padding-left: 0.2rem;
}
.page {
  margin-top: 0.2rem;
  display: flex;
  justify-content: center;
}
.list {
  margin-top: 0.2rem;
  padding: 0 0.1rem;
  font-size: 0.12rem;
}
.detail .title {
  margin-bottom: 0.1rem;
  color: #05a4bf;
}
.detail .detailBox {
  display: flex;
  flex-wrap: wrap;
}
.detail .detailItem {
  width: 50%;
  margin-bottom: 0.1rem;
}
.history .title {
  margin: 0.1rem 0;
  color: #05a4bf;
}
.user_device .title {
  margin: 0.1rem 0;
  color: #05a4bf;
}
.dialogBtn {
  display: flex;
  justify-content: center;
  margin-top: 0.3rem;
}
.goldRow{
  margin-bottom:.1rem;
}
.goldRow span{
  width:.9rem;
  display:inline-block;
}
</style>